<template>
  <div>
    <a-input
      :maxLength="30"
      v-show="!departIds"
      @click="openSelect"
      placeholder="请点击选择部门"
      v-model="departNames"
      readOnly
      :disabled="componentDisabled"
      class="jvxe-select-input"
    >
      <a-icon slot="prefix" type="cluster" title="部门选择控件" />
    </a-input>
    <j-select-depart-modal
      ref="innerDepartSelectModal"
      :modal-width="modalWidth"
      :multi="multi"
      :rootOpened="rootOpened"
      :depart-id="departIds"
      :store="storeField()"
      :text="textField()"
      @ok="handleOK"
      @initComp="initComp"
    />
    <span style="display: inline-block; height: 100%; padding-left: 14px" v-if="departIds">
      <span @click="openSelect" style="display: inline-block; vertical-align: middle">{{ departNames }}</span>
      <a-icon style="margin-left: 5px; vertical-align: middle" type="close-circle" @click="handleEmpty" title="清空" />
    </span>
  </div>
</template>

<script>
import JVxeCellMixins, { dispatchEvent } from '@/components/jeecg/JVxeTable/mixins/JVxeCellMixins'
import JSelectDepartModal from '@/components/jeecgbiz/modal/JSelectDepartModal'

export default {
  name: 'JVxeDepartSelectCell',
  mixins: [JVxeCellMixins],
  components: {
    JSelectDepartModal,
  },
  data() {
    return {
      departNames: '',
      departIds: '',
      selectedOptions: [],
      customReturnField: 'id',
    }
  },
  computed: {
    custProps() {
      const { departIds, originColumn: col, caseId, cellProps } = this
      return {
        ...cellProps,
        value: departIds,
        field: col.field || col.key,
        groupId: caseId,
        class: 'jvxe-select',
      }
    },
    componentDisabled() {
      if (this.cellProps.disabled == true) {
        return true
      }
      return false
    },
    modalWidth() {
      if (this.cellProps.modalWidth) {
        return this.cellProps.modalWidth
      } else {
        return 500
      }
    },
    multi() {
      if (this.cellProps.multi == false || this.originColumn.multi === false) {
        return false
      } else {
        return true
      }
    },
    rootOpened() {
      if (this.cellProps.open == false) {
        return false
      } else {
        return true
      }
    },
  },
  watch: {
    innerValue: {
      immediate: true,
      handler(val) {
        if (val == null || val === '') {
          this.departIds = ''
        } else {
          this.departIds = val
        }
      },
    },
  },
  methods: {
    openSelect() {
      this.$refs.innerDepartSelectModal.show()
    },
    handleEmpty() {
      this.handleOK('')
    },
    handleOK(rows) {
      let value = ''
      if (!rows && rows.length <= 0) {
        this.departNames = ''
        this.departIds = ''
      } else {
        let storeField = this.storeField()
        let textField = this.textField()
        value = rows.map((row) => row[storeField]).join(',')
        this.departNames = rows.map((row) => row[textField]).join(',')
        this.departIds = value
      }
      this.handleChangeCommon(this.departIds)
    },
    initComp(departNames) {
      this.departNames = departNames
    },
    handleChange(value) {
      this.handleChangeCommon(value)
    },
    storeField() {
      if (this.originColumn) {
        const str = this.originColumn.fieldExtendJson
        if (str) {
          let json = JSON.parse(str)
          if (json && json.store) {
            return json.store
          }
        } else if (this.originColumn.store) {
          return this.originColumn.store
        }
      }
      return 'id'
    },
    textField() {
      if (this.originColumn) {
        const str = this.originColumn.fieldExtendJson
        if (str) {
          let json = JSON.parse(str)
          if (json && json.text) {
            return json.text
          }
        } else if (this.originColumn.text) {
          return this.originColumn.text
        }
      }
      return 'departName'
    },
  },
  enhanced: {
    switches: {
      visible: true,
    },
    translate: {
      enabled: false,
    },
  },
}
</script>

<style scoped>
/deep/ .jvxe-select-input .ant-input {
  border: none !important;
}
</style>